import { compileToFunction } from "./compiler/index";
import { mountComponent } from "./lifecycle.js";
import { initState } from "./state";

// 给Vue增加init方法
export function initMixin(Vue) {
  // 初始化操作
  Vue.prototype._init = function (options) {
    // 在vue中，vm.$options就是获取用户配置的。使用Vue时，$开头都是Vue自身的方法
    const vm = this;
    vm.$options = options;

    // 初始化状态处理函数
    initState(vm);

    if (options.el) {
      vm.$mount(options.el);
    }
  };

  // 由于把$mount方法挂载到原型上，因此除了传el外，可直接new Vue().$mount也可以
  Vue.prototype.$mount = function (el) {
    const vm = this;
    el = document.querySelector(el);
    let ops = vm.$options;

    // 查看是否写render函数
    if (ops.render) {
      ops.render;
    } else {
      // 没有render看一下是否写template，没写采用外部的template
      let template;
      // 如果没有写模板但是写了el
      if (!ops.template && el) {
        template = el.outerHTML;
      } else {
        if (el) {
          // 如果有el，采用模板的内容
          template = ops.template;
        }
      }

      // 写了template，就采用写了的template
      if (template) {
        const render = compileToFunction(template);
        ops.render = render;
      }
    }

    mountComponent(vm, el); // 组件挂载到实例上

    // 获取到render方法
  };
}
